<template>
  <div v-if="show">
    <a-form label-position="top">
      <!--//字段标识-->
      <a-form-item :label="$t('fm.config.widget.model')" v-if="data.type != 'grid'">
        <a-input v-model="data.model"></a-input>
      </a-form-item>
      <!--//标题-->
      <a-form-item :label="$t('fm.config.widget.name')" v-if="data.type != 'grid'">
        <a-input v-model="data.name"></a-input>
      </a-form-item>
      <!--//宽度-->
      <a-form-item :label="$t('fm.config.widget.width')" v-if="Object.keys(data.options).indexOf('width') >= 0">
        <a-input v-model="data.options.width"></a-input>
      </a-form-item>
      <!--//高度-->
      <a-form-item :label="$t('fm.config.widget.height')" v-if="Object.keys(data.options).indexOf('height') >= 0">
        <a-input v-model="data.options.height"></a-input>
      </a-form-item>

      <a-form-item :label="$t('fm.config.widget.size')" v-if="Object.keys(data.options).indexOf('size') >= 0">
        {{ $t('fm.config.widget.width') }}
        <a-input-number style="width: 90px;" v-model="data.options.size.width" />
        {{ $t('fm.config.widget.height') }}
        <a-input-number style="width: 90px;" v-model="data.options.size.height" />
      </a-form-item>
      <a-form-item
        :label="$t('fm.config.widget.placeholder')"
        v-if="Object.keys(data.options).indexOf('placeholder') >= 0 && (data.type != 'time' || data.type != 'date')"
      >
        <a-input v-model="data.options.placeholder"></a-input>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.layout')" v-if="Object.keys(data.options).indexOf('inline') >= 0">
        <a-radio-group v-model="data.options.inline" button-style="solid">
          <a-radio-button :value="false">{{ $t('fm.config.widget.block') }}</a-radio-button>
          <a-radio-button :value="true">{{ $t('fm.config.widget.inline') }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.showInput')" v-if="Object.keys(data.options).indexOf('showInput') >= 0">
        <a-switch v-model="data.options.showInput"></a-switch>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.min')" v-if="Object.keys(data.options).indexOf('min') >= 0">
        <a-input-number v-model="data.options.min" :min="0" :max="100" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.max')" v-if="Object.keys(data.options).indexOf('max') >= 0">
        <a-input-number v-model="data.options.max" :min="0" :max="100" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.step')" v-if="Object.keys(data.options).indexOf('step') >= 0">
        <a-input-number v-model="data.options.step" :min="0" :max="100" :step="1"></a-input-number>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.multiple')" v-if="data.type == 'select' || data.type == 'imgupload'">
        <a-switch v-model="data.options.multiple" @change="handleSelectMuliple"></a-switch>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.filterable')" v-if="data.type == 'select'">
        <a-switch v-model="data.options.filterable"></a-switch>
      </a-form-item>
      <a-form-item label="$t('fm.config.widget.allowHalf')" v-if="Object.keys(data.options).indexOf('allowHalf') >= 0">
        <a-switch v-model="data.options.allowHalf"></a-switch>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.showAlpha')" v-if="Object.keys(data.options).indexOf('showAlpha') >= 0">
        <a-switch v-model="data.options.showAlpha"></a-switch>
      </a-form-item>
      <!--//是否显示标签-->
      <a-form-item :label="$t('fm.config.widget.showLabel')" v-if="Object.keys(data.options).indexOf('showLabel') >= 0">
        <a-switch v-model="data.options.showLabel"></a-switch>
      </a-form-item>
      <a-form-item :label="$t('fm.config.widget.option')" v-if="Object.keys(data.options).indexOf('options') >= 0">
        <a-radio-group v-model="data.options.remote" size="small" style="margin-bottom:10px;display: block;">
          <a-radio-button :value="false">{{ $t('fm.config.widget.staticData') }}</a-radio-button>
          <a-radio-button :value="true">{{ $t('fm.config.widget.remoteData') }}</a-radio-button>
        </a-radio-group>
        <template v-if="data.options.remote">
          <div><a-input :addon-before="$t('fm.config.widget.remoteFunc')" v-model="data.options.remoteFunc" /></div>
          <div><a-input :addon-before="$t('fm.config.widget.value')" v-model="data.options.props.value" /></div>
          <div><a-input :addon-before="$t('fm.config.widget.label')" v-model="data.options.props.label" /></div>
        </template>
        <template v-else>
          <template v-if="data.type == 'radio' || (data.type == 'select' && !data.options.multiple)">
            <a-radio-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{ group: { name: 'options' }, ghostClass: 'ghost', handle: '.drag-item' }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <a-radio :value="item.value" style="margin-right: 5px;">
                    <a-input :style="{ width: data.options.showLabel ? '90px' : '180px' }" size="small" v-model="item.value" ></a-input>
                    <a-input style="width:90px;" size="small" v-if="data.options.showLabel" v-model="item.label" ></a-input>
                    <!-- <input v-model="item.value" /> -->
                  </a-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
                    <i class="iconfont icon-icon_bars"></i>
                  </i>
                  <a-button @click="handleOptionsRemove(index)" circle plain type="danger" size="small" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" ></a-button>
                </li>
              </draggable>
            </a-radio-group>
          </template>

          <template v-if="data.type == 'checkbox' || (data.type == 'select' && data.options.multiple)">
            <a-checkbox-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{ group: { name: 'options' }, ghostClass: 'ghost', handle: '.drag-item' }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <a-checkbox :value="item.value" style="margin-right: 5px;">
                    <a-input :style="{ width: data.options.showLabel ? '90px' : '180px' }" size="small" v-model="item.value" ></a-input>
                    <a-input style="width:90px;" size="small" v-if="data.options.showLabel" v-model="item.label" ></a-input>
                  </a-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
                    <i class="iconfont icon-icon_bars"></i>
                  </i>
                  <a-button @click="handleOptionsRemove(index)" circle plain type="danger" size="small" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" ></a-button>
                </li>
              </draggable>
            </a-checkbox-group>
          </template>
          <div style="margin-left: 22px;">
            <a-button type="text" @click="handleAddOption">{{ $t('fm.actions.addOption') }}</a-button>
          </div>
        </template>
      </a-form-item>

      <a-form-item :label="$t('fm.config.widget.remoteData')" v-if="data.type == 'cascader'">
        <div>
          <a-input size="small" style v-model="data.options.remoteFunc">
            <template slot="prepend">{{ $t('fm.config.widget.remoteFunc') }}</template>
          </a-input>
          <a-input size="small" style v-model="data.options.props.value">
            <template slot="prepend">{{ $t('fm.config.widget.value') }}</template>
          </a-input>
          <a-input size="small" style v-model="data.options.props.label">
            <template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
          </a-input>
          <a-input size="small" style v-model="data.options.props.children">
            <template slot="prepend">{{ $t('fm.config.widget.childrenOption') }}</template>
          </a-input>
        </div>
      </a-form-item>
      <a-form-item
        :label="$t('fm.config.widget.defaultValue')"
        v-if="
          Object.keys(data.options).indexOf('defaultValue') >= 0 &&
            (data.type == 'textarea' ||
              data.type == 'input' ||
              data.type == 'rate' ||
              data.type == 'color' ||
              data.type == 'switch')
        "
      >
        <a-input v-if="data.type == 'textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></a-input>
        <a-input v-if="data.type == 'input'" v-model="data.options.defaultValue"></a-input>
        <a-rate
          v-if="data.type == 'rate'"
          style="display:inline-block;vertical-align: middle;"
          :max="data.options.max"
          :allow-half="data.options.allowHalf"
          v-model="data.options.defaultValue"
        ></a-rate>
        <a-button
          type="text"
          v-if="data.type == 'rate'"
          style="display:inline-block;vertical-align: middle;margin-left: 10px;"
          @click="data.options.defaultValue = 0"
        >
          {{ $t('fm.actions.clear') }}
        </a-button>
        <a-color-picker
          v-if="data.type == 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        ></a-color-picker>
        <a-switch v-if="data.type == 'switch'" v-model="data.options.defaultValue"></a-switch>
      </a-form-item>

      <!--//时间选择器、日期选择器-->
      <template v-if="data.type == 'time' || data.type == 'date'">
        <a-form-item :label="$t('fm.config.widget.showType')" v-if="data.type == 'date'">
          <a-select v-model="data.options.type">
            <a-select-option value="year">year</a-select-option>
            <a-select-option value="month">month</a-select-option>
            <a-select-option value="date">date</a-select-option>
            <!-- <a-select-option value="dates">dates</a-select-option> 
            <a-select-option value="week">week</a-selectoption>
            <a-select-option value="datetime">datetime</a-select-option>
            <a-select-option value="datetimerange">datetimerange</a-select-option>
            <a-select-option value="daterange">daterange</a-select-option> -->
            <a-select-option value="time">time</a-select-option>
            <a-select-option value="time">decade</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('fm.config.widget.isRange')" v-if="data.type == 'time'">
          <a-switch v-model="data.options.isRange"></a-switch>
        </a-form-item>
        <a-form-item :label="$t('fm.config.widget.isTimestamp')" v-if="data.type == 'date'">
          <a-switch v-model="data.options.timestamp"></a-switch>
        </a-form-item>
        <a-form-item
          :label="$t('fm.config.widget.placeholder')"
          v-if="
            (!data.options.isRange && data.type == 'time') ||
              (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')
          "
        >
          <a-input v-model="data.options.placeholder"></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('fm.config.widget.startPlaceholder')"
          v-if="data.options.isRange || data.options.type == 'datetimerange' || data.options.type == 'daterange'"
        >
          <a-input v-model="data.options.startPlaceholder"></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('fm.config.widget.endPlaceholder')"
          v-if="data.options.isRange || data.options.type == 'datetimerange' || data.options.type == 'daterange'"
        >
          <a-input v-model="data.options.endPlaceholder"></a-input>
        </a-form-item>
        <a-form-item :label="$t('fm.config.widget.format')">
          <a-input v-model="data.options.format"></a-input>
        </a-form-item>
        <a-form-item
          :label="$t('fm.config.widget.defaultValue')"
          v-if="data.type == 'time' && Object.keys(data.options).indexOf('isRange') >= 0"
        >
          <a-time-picker
            key="1"
            style="width: 100%;"
            v-if="!data.options.isRange"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          ></a-time-picker>
          <a-time-picker
            key="2"
            v-if="data.options.isRange"
            style="width: 100%;"
            v-model="data.options.defaultValue"
            is-range
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          ></a-time-picker>
        </a-form-item>
      </template>
      <template v-if="data.type == 'imgupload'">
        <a-form-item :label="$t('fm.config.widget.limit')">
          <a-input-number v-model="data.options.length" />
        </a-form-item>
        <!-- <a-form-item :label="$t('fm.config.widget.isQiniu')">
          <a-switch v-model="data.options.isQiniu"></a-switch>
        </a-form-item>
        <template v-if="data.options.isQiniu">
          <a-form-item label="Domain" :required="true">
            <a-input v-model="data.options.domain"></a-input>
          </a-form-item>
          <a-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
            <a-input v-model="data.options.tokenFunc"></a-input>
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item :label="$t('fm.config.widget.imageAction')" :required="true">
            <a-input v-model="data.options.action"></a-input>
          </a-form-item>
        </template> -->
      </template>

      <template v-if="data.type == 'blank'">
        <a-form-item :label="$t('fm.config.widget.defaultType')">
          <a-select v-model="data.options.defaultType">
            <a-select-option value="String">{{$t('fm.config.widget.string')}}</a-select-option>
            <a-select-option value="Object">{{$t('fm.config.widget.object')}}</a-select-option>
            <a-select-option value="Array">{{$t('fm.config.widget.array')}}</a-select-option>
          </a-select>
        </a-form-item>
      </template>
      <!--// 栅格布局-->
      <template v-if="data.type == 'grid'">
        <!--//栅格间隔-->
        <a-form-item :label="$t('fm.config.widget.gutter')">
          <a-input-number v-model="data.options.gutter" />
        </a-form-item>
        <!--//列配置项-->
        <a-form-item :label="$t('fm.config.widget.columnOption')">
          <draggable
            tag="ul"
            :list="data.columns"
            v-bind="{ group: { name: 'options' }, ghostClass: 'ghost', handle: '.drag-item' }"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.columns" :key="index">
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;">
                <i class="iconfont icon-icon_bars"></i>
              </i>
              <a-input-number :placeholder="$t('fm.config.widget.span')" size="small" style="width: 100px;" v-model="item.span" />

              <a-button @click="handleOptionsRemove(index)" circle plain type="danger" size="small" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" ></a-button>
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <a-button type="text" @click="handleAddColumn">{{ $t('fm.actions.addColumn') }}</a-button>
          </div>
        </a-form-item>
        <!--//水平排列方式-->
        <a-form-item :label="$t('fm.config.widget.justify')">
          <a-select v-model="data.options.justify">
            <a-select-option value="start">{{$t('fm.config.widget.justifyStart')}}</a-select-option>
            <a-select-option value="end">{{$t('fm.config.widget.justifyEnd')}}</a-select-option>
            <a-select-option value="center">{{$t('fm.config.widget.justifyCenter')}}</a-select-option>
            <a-select-option value="space-around">{{$t('fm.config.widget.justifySpaceAround')}}</a-select-option>
            <a-select-option value="space-between">{{$t('fm.config.widget.justifySpaceBetween')}}</a-select-option>
          </a-select>
        </a-form-item>
        <!--//垂直排列方式-->
        <a-form-item :label="$t('fm.config.widget.align')">
          <a-select v-model="data.options.align">
            <a-select-option value="top">{{$t('fm.config.widget.alignTop')}}</a-select-option>
            <a-select-option value="middle">{{$t('fm.config.widget.alignMiddle')}}</a-select-option>
            <a-select-option value="bottom">{{$t('fm.config.widget.alignBottom')}}</a-select-option>
          </a-select>
        </a-form-item>
      </template>
      
      <template v-if="data.type != 'grid'">
        <!--//操作属性-->
        <a-form-item class="item_checkbox" :label="$t('fm.config.widget.attribute')">
          <a-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly') >= 0">
            {{ $t('fm.config.widget.readonly') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled') >= 0">
            {{ $t('fm.config.widget.disabled') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable') >= 0">
            {{ $t('fm.config.widget.editable') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable') >= 0">
            {{ $t('fm.config.widget.clearable') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl') >= 0">
            {{ $t('fm.config.widget.arrowControl') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete') >= 0">
            {{ $t('fm.config.widget.isDelete') }}
          </a-checkbox>
          <a-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit') >= 0">
            {{ $t('fm.config.widget.isEdit') }}
          </a-checkbox>
        </a-form-item>
        <a-form-item :label="$t('fm.config.widget.validate')">
          <div v-if="Object.keys(data.options).indexOf('required') >= 0">
            <a-checkbox v-model="data.options.required">{{ $t('fm.config.widget.required') }}</a-checkbox>
          </div>
          <a-select
            v-if="Object.keys(data.options).indexOf('dataType') >= 0"
            v-model="data.options.dataType"
            size="small"
          >
            <a-select-option value="string" :label="$t('fm.config.widget.string')">
              {{ $t('fm.config.widget.string') }}
            </a-select-option>
            <a-select-option value="number" :label="$t('fm.config.widget.number')">
              {{ $t('fm.config.widget.number') }}
            </a-select-option>
            <a-select-option value="boolean" :label="$t('fm.config.widget.boolean')">
              {{ $t('fm.config.widget.boolean') }}
            </a-select-option>
            <a-select-option value="integer" :label="$t('fm.config.widget.integer')">
              {{ $t('fm.config.widget.integer') }}
            </a-select-option>
            <a-select-option value="float" :label="$t('fm.config.widget.float')">
              {{ $t('fm.config.widget.float') }}
            </a-select-option>
            <a-select-option value="url" :label="$t('fm.config.widget.url')">
              {{ $t('fm.config.widget.url') }}
            </a-select-option>
            <a-select-option value="email" :label="$t('fm.config.widget.email')">
              {{ $t('fm.config.widget.email') }}
            </a-select-option>
            <a-select-option value="hex" :label="$t('fm.config.widget.hex')">
              {{ $t('fm.config.widget.hex') }}
            </a-select-option>
          </a-select>
          <div v-if="Object.keys(data.options).indexOf('pattern') >= 0">
            <a-input
              size="small"
              v-model.lazy="data.options.pattern"
              style=" width: 240px;"
              :placeholder="$t('fm.config.widget.patternPlaceholder')"
            ></a-input>
          </div>
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'

  export default {
    components: {
      Draggable,
    },
    props: ['data'],
    data() {
      return {
        validator: {
          type: null,
          required: null,
          pattern: null,
          range: null,
          length: null,
        },
      }
    },
    computed: {
      show() {
        if (this.data && Object.keys(this.data).length > 0) {
          return true
        }
        return false
      },
    },
    methods: {
      handleOptionsRemove(index) {
        if (this.data.type === 'grid') {
          this.data.columns.splice(index, 1)
        } else {
          this.data.options.options.splice(index, 1)
        }
      },
      handleAddOption() {
        if (this.data.options.showLabel) {
          this.data.options.options.push({
            value: this.$t('fm.config.widget.newOption'),
            label: this.$t('fm.config.widget.newOption'),
          })
        } else {
          this.data.options.options.push({
            value: this.$t('fm.config.widget.newOption'),
          })
        }
      },
      handleAddColumn() {
        this.data.columns.push({
          span: '',
          list: [],
        })
      },
      generateRule() {
        this.data.rules = []
        Object.keys(this.validator).forEach(key => {
          if (this.validator[key]) {
            this.data.rules.push(this.validator[key])
          }
        })
      },
      handleSelectMuliple(value) {
        if (value) {
          if (this.data.options.defaultValue) {
            this.data.options.defaultValue = [this.data.options.defaultValue]
          } else {
            this.data.options.defaultValue = []
          }
        } else {
          if (this.data.options.defaultValue.length > 0) {
            this.data.options.defaultValue = this.data.options.defaultValue[0]
          } else {
            this.data.options.defaultValue = ''
          }
        }
      },

      validateRequired(val) {
        if (val) {
          this.validator.required = {
            required: true,
            message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}`,
          }
        } else {
          this.validator.required = null
        }

        this.$nextTick(() => {
          this.generateRule()
        })
      },

      validateDataType(val) {
        if (!this.show) {
          return false
        }

        if (val) {
          this.validator.type = { type: val, message: this.data.name + this.$t('fm.config.widget.validatorType') }
        } else {
          this.validator.type = null
        }

        this.generateRule()
      },
      valiatePattern(val) {
        if (!this.show) {
          return false
        }

        if (val) {
          this.validator.pattern = {
            pattern: val,
            message: this.data.name + this.$t('fm.config.widget.validatorPattern'),
          }
        } else {
          this.validator.pattern = null
        }

        this.generateRule()
      },
    },
    watch: {
      data: function(val) {
        // console.log(val)
      },
      'data.options.isRange': function(val) {
        if (typeof val !== 'undefined') {
          if (val) {
            this.data.options.defaultValue = null
          } else {
            if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) this.data.options.defaultValue = ''
          }
        }
      },
      'data.options.required': function(val) {
        this.validateRequired(val)
      },
      'data.options.dataType': function(val) {
        this.validateDataType(val)
      },
      'data.options.pattern': function(val) {
        this.valiatePattern(val)
      },
      'data.name': function(val) {
        if (this.data.options) {
          this.validateRequired(this.data.options.required)
          this.validateDataType(this.data.options.dataType)
          this.valiatePattern(this.data.options.pattern)
        }
      },
    },
  }
</script>
<style lang="less" scoped>
.item_checkbox{
 width: 300px;
}
</style>